<template>
  <el-row class="brand-top-bar">
    <!--<el-form class="pull-right" :inline="true" :model="search">
      <el-form-item>
        <el-input v-model="search.keyword" placeholder="审核人姓名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="search" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>-->

    <el-button type="primary" icon="plus" v-if="isAduit" @click="_handleToNewAduit">新建审核人员</el-button>
    <el-button type="primary" icon="plus" v-else @click="_handleOpenLeft">新建销售人员</el-button>

    <el-dialog ref="saleDialog" class="sales-dialog" :visible.sync="dialogShow" :modal="false">


      <div class="part-top">
        <el-button class="dialog-back-btn" type="text" icon="arrow-left" @click="dialogShow = !dialogShow">返回</el-button>

        <el-form :model="invite">
          <el-form-item>
            <el-input v-model="invite.tel" placeholder="输入邀请人的手机号码" icon="search"></el-input>
          </el-form-item>
        </el-form>
      </div>

      <div class="part-down">
        <ul>
          <li>
            <img v-vImg="" alt="">
            <span>李丽云</span>
            <span>18930785462</span>
            <i class="el-icon-plus" @click="_handleJoin"></i>
          </li>

                    <li>
            <img v-vImg="" alt="">
            <span>李丽云</span>
            <span>18930785462</span>
            <i class="el-icon-plus" @click="_handleJoin"></i>
          </li>

                    <li>
            <img v-vImg="" alt="">
            <span>李丽云</span>
            <span>18930785462</span>
            <i class="el-icon-plus" @click="_handleJoin"></i>
          </li>

                    <li>
            <img v-vImg="" alt="">
            <span>李丽云</span>
            <span>18930785462</span>
            <i class="el-icon-plus" @click="_handleJoin"></i>
          </li>

                    <li>
            <img v-vImg="" alt="">
            <span>李丽云</span>
            <span>18930785462</span>
            <i class="el-icon-plus" @click="_handleJoin"></i>
          </li>

                    <li>
            <img v-vImg="" alt="">
            <span>李丽云</span>
            <span>18930785462</span>
            <i class="el-icon-plus" @click="_handleJoin"></i>
          </li>

                    <li>
            <img v-vImg="" alt="">
            <span>李丽云</span>
            <span>18930785462</span>
            <i class="el-icon-plus" @click="_handleJoin"></i>
          </li>
        </ul>

      </div>
    </el-dialog>

                  <el-dialog
        title="确认邀请该销售"
        :visible.sync="joinDialog"
        size="tiny">
        <span>这是一段信息</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="joinDialog = false">取 消</el-button>
          <el-button type="primary" @click="joinDialog = false">确 定</el-button>
        </span>
      </el-dialog>
  </el-row>
</template>

<script>
export default {
  props: {
    isAduit: {
      type: Boolean,
      required: true
    }
  },

  data: () => ({
    search: {
      keyword: ''
    },
    invite: {
      tel: ''
    },
    dialogShow: false,
    joinDialog: false
  }),
  mounted() {
    // 设置dialog的高度，是浏览器内部高度减去面包屑跟tab栏高度
    this.$refs.saleDialog.$el.childNodes[0].style.height = window.innerHeight - 112 + 'px'
  },
  methods: {
    onSubmit() {
    },
    _handleToNewAduit() {
      this.$router.push({ name: 'brand-new-aduit' })
    },
    _handleOpenLeft() {
      this.dialogShow = true
    },
    _handleJoin() {
      this.joinDialog = true
    }
  }
}
</script>

<style lang="scss">
.brand-top-bar {
  margin-bottom: 18px;

  .sales-dialog{
    >.el-dialog{
      transform: none;
      left: 70%;
      width: 30%;
      // right: 0;
      top: 112px !important;
      margin: 0;

      >.el-dialog__header{
        display: none;
      }

      >.el-dialog__body{
        padding: 0;

        .dialog-back-btn{
          margin-bottom: 30px;
        }

        .part-top, .part-down{
          padding: 40px;

          &.part-top{
            box-shadow:inset 0 -1px 0 0 #e0e6ed, inset 0 1px 0 0 #e0e6ed, inset 1px 0 0 0 #e0e6ed;
          }

          &.part-down{
            overflow-y: scroll;

            ul{
              list-style-type: none;
              padding: 0;
              margin: 0;

              li{
                padding: 20px 30px;
                display: flex;
                flex-flow: row nowrap;
                justify-content: space-around;
                align-items: center;


                &:nth-child(odd){
                  background-color:#f9fafc;
                }

                img{
                  height: 36px;
                  width: 36px;
                  border-radius: 18px;
                }

                span{
                  font-size:14px;
                  color:#5e6d82;
                  letter-spacing:0;
                  // margin-left: 50px;
                  // &:last-child{
                  //   margin-right: right:
                  // }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
